<template>
    <view class="content ml20 mr20">
        <view class="dis_sb pl40 pr40 bgfff rad25 pt10 pb10 f28 mt20">
            <view class="tac" @click="taptab(1)">
                <image src="/static/pic6.png" mode="heightFix"></image>
                <view :class="now==1?'clo-blue':'clo-444'">
					<block v-if="page_type=='receive'">应收金额</block>
					<block v-if="page_type=='payment'">应付金额</block>
				</view>
            </view>
            <view class="tac" @click="taptab(2)">
                <image src="/static/pic7.png" mode="heightFix"></image>
                <view :class="now==2?'clo-blue':'clo-444'">
					<block v-if="page_type=='receive'">已收款</block>
					<block v-if="page_type=='payment'">已收款</block>
				</view>
            </view>
            <view class="tac" @click="taptab(3)">
                <image src="/static/pic8.png" mode="heightFix"></image>
                <view :class="now==3?'clo-blue':'clo-444'">
					<block v-if="page_type=='receive'">未收款</block>
					<block v-if="page_type=='payment'">未收款</block>
				</view>
            </view>
        </view>
        <view class="bgfff rad25 mt20">
            <mescroll-uni top="0" :bottom="0" :fixed="false" height="80%" @init="mescrollInit" @down="downCallback" @up="getListFn" :down="mescrollData.downOption" :up="mescrollData.upOption">
                <view v-for="(item,index) in dataList" class="pr  dis_sb pt10 pb10">
                    <template v-if="page_type == 'receive'">
                        <view class="left line18">
                            <view class="tit">卸车单位：{{ item.company_name }}</view>
                            <view class="clo-999 pl20 f28">卸车时间：{{ item.unload_date }}</view>
							<view class="clo-999 pl20 f28">车号：{{ item.car_code }}</view>
                            <view class="clo-999 pl20 f28">卸车吨数：{{ item.unload_weight }}吨</view>
							<view class="clo-999 pl20 f28" v-if="item.is_fare == 0">卸车单价：{{ item.sale_price }}元/吨</view>
							<view class="clo-999 pl20 f28" v-if="item.is_fare == 1">运费单价：{{ item.fare_price }}元/吨</view>
                        </view>
                        <view class="right mr20 line16 pt20">
                            <view class="clo-000 fwb">金额</view>
                            <view class="clo-blue">¥<text class="f34 fwb">{{ item.sale_income }}</text></view>
                        </view>
                        <view class="state" v-if="item.receive_payment_status ==1">{{ item.receive_payment }}</view>
                        <view class="state state1" v-if="item.receive_payment_status ==0">{{ item.receive_payment }}</view>
                    </template>
                    <template v-if="page_type == 'payment'">
                        <view class="left line18">
                            <view class="tit">装车单位：{{ item.company_name }}</view>
                            <view class="clo-999 pl20 f28">装车时间：{{ item.unload_date }}</view>
							<view class="clo-999 pl20 f28">车号：{{ item.car_code }} </view>
                            <view class="clo-999 pl20 f28">装车吨数：{{ item.loading_weight }}吨 </view>
							<view class="clo-999 pl20 f28">装车单价：{{ item.loading_price }}元/吨 </view>
							<view class="clo-999 pl20 f28">装车费：{{ item.loading_fee }} 元</view>
                        </view>
                        <view class="right mr20 line16 pt20">
                            <view class="clo-000 fwb">金额</view>
                            <view class="clo-blue">¥<text class="f34 fwb">{{ item.loading_goods_price }}</text></view>
                        </view>
                        <view class="state" v-if="item.payment_status == 1">{{ item.payment }}</view>
                        <view class="state state1" v-if="item.payment_status == 0">{{ item.payment }}</view>
                    </template>
                </view>
            </mescroll-uni>
        </view>
    </view>
</template>


<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { collectAllStatisticsDetail, meetAllStatisticsDetail } from '@/utils/api'
const { proxy } = getCurrentInstance();
proxy.$checkUserType();
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
const now = ref(1)

const dataList = ref([])
const searchParam = reactive({
    customer_id:'',
    type: 1,  //1年度数据 2月度数据 3昨日数据
    s_year: '',
    s_year_month: '',
    s_money_type: '', //筛选 1销售总额 2已收款 3欠款
	
})
const page_type = ref(''); // receive 收款 payment 付款
onLoad((e)=>{
	console.log(e)
    if (!e.page_type || !e.customer_id || !e.type) {
        proxy.$showToast('参数错误');
        setTimeout(() => {
            uni.navigateBack({
                delta: 1
            })

        }, 2000)
        return false;
    }
    page_type.value = e.page_type;
    searchParam.customer_id = e.customer_id;
    searchParam.type = e.type;
    searchParam.s_year = e.s_year;
    searchParam.s_year_month = e.s_year_month;
})

const taptab = (e) => {
    now.value = e
    searchParam.s_money_type = e
    dataList.value = [];
    getMescroll().resetUpScroll();
}


const mescrollData = reactive({
    downOption: {},
    upOption: {
        page: {
            size: 10 // 每页数据的数量
        },
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        empty: {
            tip: '~ 暂无数据 ~' // 提示
        }
    }
})

const getListFn = (mescroll) => {
    let data = {
        page: mescroll.num,
        pageSize: mescroll.size,
        ...searchParam
    };
    let showLoading = false;
    if (mescroll.num == 1) {
        showLoading = true;
    }
    const listFn = page_type.value == 'receive' ? collectAllStatisticsDetail : meetAllStatisticsDetail;
    listFn(data, showLoading).then((res) => {
        let curPageData = res.data.list || [];
        let totalSize = res.data.count;
        //设置列表数据
        if (mescroll.num == 1) {
            dataList.value = [];
        }
        dataList.value = dataList.value.concat(curPageData);
        // mescroll.endSuccess(curPageData.length);
        mescroll.endBySize(curPageData.length, totalSize);
    }).catch(() => {
        mescroll.endErr(); // 请求失败, 结束加载
    })
}
</script>

<style>
	.tit::after {top: 18%; left: 20rpx;}
	.pr {overflow: hidden;}
	.state {position: absolute; border-radius: 0 0 0 25rpx; font-size: 24rpx; padding: 10rpx 25rpx; top: 0; right: 0; color: #76da91;  background: #f1fbf4;}
	.state1 {background:#ffefed ; color: #fb614d;}
	.pr{border-bottom: 10rpx solid #eee;}
</style>
